import React, { useState } from 'react';
import { Button, Form, Input, message } from 'antd';
import './form.css'
import { useLocation, useNavigate } from 'react-router-dom';
import {useDispatch} from 'react-redux';
import { login } from '../../store/authSlice';

const Login = () => {
  // const location = useLocation()
  // console.log('location', location)
  let adminData = {
    id:'666',
    username:'admin',
    orgCode: '35002',
    mobile:'13500000000',
    token:
      'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VySWQiOiJhZG1pbiIsInVzZXJOYW1lIjoiYWRtaW4iLCJvcmdDb2RlIjoiMzUwMDAiLCJkZXB0Q29kZSI6IjM1MDAwIiwiYXVkIjoiYWRtaW4iLCJpc3MiOiJhZG1pbiIsImV4cCI6MTU5MzUzNTU5OH0.0pJAojRtT5lx6PS2gH_Q9BmBxeNlgBL37ABX22HyDlebbr66cCjVYZ0v0zbLO_9241FX9-FZpCkEqE98MQOyWw'
  }
  // eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxNTc5Nzk5ODM1MyIsImNyZWF0ZWQiOjE2ODAxNTY3MzgxODUsImV4cCI6MTY4MDE3NDczOH0.LPGsbRmvSe2hm_Ca3QajB5LDyt1OWkZbgX2SMAKLlqe9UbPGvJeFqbL9xnayE-XPnmQOuaeMNKIS93--r2tIEg
  const nav = useNavigate()
  const [messageApi, contextHolder] = message.useMessage();
  // 获取dispatch
  const dispatch = useDispatch()
  
  const onFinish = (values) => {
    // 登录状态 Boolean
    // token
    const {password,username} = values
    if(username == 'admin' && password == '123456'){
      messageApi.success('登录成功！');
      dispatch(login({
        token: adminData.token,
        user: adminData
      }))
      setTimeout(()=>{
        nav('/home/main', {replace: true})
      },500)
      return false
    }
    if(username == 'common' && password == '123456'){
      messageApi.success('登录成功！');
      adminData.username = 'common'
      dispatch(login({
        token: adminData.token,
        user: adminData
      }))
      setTimeout(()=>{
        nav('/home/main', {replace: true})
      },500)
      return false
    }
    messageApi.error('请输入正确的账号密码！');
  }
  // 完成注册
  const onRegister = (values) => {
    if(values.password != values.againpassword){
      messageApi.error('两次密码不一致！');
      return false
    }
    setLoginShow(true)
    setRegShow(false)
  }
  // 注册
  const goRegister = () => {
    setLoginShow(false)
    setRegShow(true)
  }
  const back = () => {
    setLoginShow(true)
    setRegShow(false)
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
  const userNameRules = [{ required: true, message: 'Please input your username!' }]
  const passwordRules = [{ required: true, message: 'Please input your password!' }]
  const passwordRules2 = [{ required: true, message: 'Please input again your password!' }]
  const [loginShow, setLoginShow] = useState(true)
  const [regShow, setRegShow] = useState(false)
  return (
    <>
      {contextHolder}
      {loginShow?<Form className='form' name="basic" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off">
        <Form.Item><h2>Login</h2></Form.Item>
        <Form.Item label="Username" name="username" rules={userNameRules}>
          <Input placeholder='admin / common'/>
        </Form.Item>
        <Form.Item label="Password" name="password" rules={passwordRules}>
          <Input.Password placeholder='123456'/>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
          <Button>取消</Button>
          <Button onClick={goRegister}>注册</Button>
        </Form.Item>
      </Form>:null}

      {regShow?<Form className='form' name="basic" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onRegister}
        autoComplete="off">
        <Form.Item><h2>Register</h2></Form.Item>
        <Form.Item label="Username" name="username" rules={userNameRules}>
          <Input />
        </Form.Item>
        <Form.Item label="Password" name="password" rules={passwordRules}>
          <Input.Password />
        </Form.Item>
        <Form.Item label="againPassword" name="againpassword" rules={passwordRules2}>
          <Input.Password />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            确定
          </Button>
          <Button onClick={back}>返回</Button>
        </Form.Item>
      </Form>:null}
    </>
  );
};

export default Login;